<template>
	<BasicModal v-bind="$attrs" :helpMessage="[modalData.title]" @register="registerModal" :title="modalData.title">
		<!-- <div v-if="modalData.checkType == 1" style="padding:15px 8px"> -->
		<!-- <span style="margin-right:5px;font-weight:500;font-size:20px">审批节点：</span> -->
		<!-- <a-select v-model:value="formData.selected" size="middle" style="width: 200px" :options="options"
				placeholder="选择要处理的节点"></a-select> -->

		<!-- <span style="margin-left:15px;font-weight:200;font-size:15px">要处理哪个任务</span> -->

		<!-- </div> -->
		<!-- <div v-if="modalData.checkType == 2"></div>
		<div v-if="modalData.checkType == 3"></div> -->
		<div v-if="modalData.checkType == 4" style="padding:15px 8px">
			<span style="margin-right:5px;font-weight:500;font-size:20px;margin-right: 15px;">转交给谁:</span>
			<a-tag v-if="formData.showNickName" style="margin-right: 15px;" color="cyan">{{ formData.showNickName }}</a-tag>
			<a-button shape="round" @click="openHandle">选择</a-button>
			<UserSelectModal rowKey="userId" @register="registerSelUserModal" @getSelectResult="onSelectOk" />
			<!-- store="userId"  -->
		</div>
		<!-- <div v-if="modalData.checkType == 5" style="padding:15px 8px">
			<span style="margin-right:5px;font-weight:500;font-size:20px">回退节点</span>
		</div>
		<div v-if="modalData.checkType == 6" style="padding:15px 8px"></div> -->


		<span style="margin-left:5px;font-weight:500;font-size:20px;">{{ modalData.palceholder
		}}</span>
		<a-textarea v-model:value="formData.textvalue" show-count :rows="4" :placeholder="modalData.palceholder"
			style="margin-top: 15px;" :maxlength="255">

		</a-textarea>

		<div class="clearfix">
			<a-upload v-model:file-list="formData.picList" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
				list-type="picture-card" @preview="handlePreview">
				<div v-if="formData.picList.length < 8">
					<plus-outlined />
					<div style="margin-top: 8px">上传图片</div>
				</div>
			</a-upload>
			<a-modal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
				<img alt="example" style="width: 100%" :src="previewImage" />
			</a-modal>
		</div>
		<div style="margin-bottom: 15px;">
			<span style="color: red;font-size: 15px;">*</span><span style="margin-left:15px;font-size: 15px;">添加图片 |
				每张不超过10MB</span><br />
		</div>

		<a-upload v-model:file-list="formData.fileList" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
			<a-button>
				<upload-outlined></upload-outlined>
				上传文件
			</a-button>
		</a-upload>
		<div style="margin-top: 15px;">
			<span style="color: red;font-size: 15px;">*</span><span style="margin: 15px;font-size: 15px;">添加附件 |
				单个附件不超过100MB</span><br />
		</div>
	</BasicModal>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { UploadOutlined, PlusOutlined } from '@ant-design/icons-vue';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
import UserSelectModal from '/@/components/Form/src/jeecg/components/modal/UserSelectModal.vue'
// 注册用户选择框
const [registerSelUserModal, { openModal: openUserModal, closeModal: closeUserModal }] = useModal()

// 打开用户选择框
function openHandle() {
	openUserModal();
}
// 选择用户成功
function onSelectOk(options, values) {
	formData.selected = values.join(',')
	formData.showNickName = options[0].nickName
	console.log('选择的用户', options, values, formData.selected)
	closeUserModal()
	//处理业务逻辑
}
const modalData = ref({})
function getBase64(file: File) {
	return new Promise((resolve, reject) => {
		const reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = () => resolve(reader.result);
		reader.onerror = error => reject(error);
	});
}
const [registerModal, { openModal, setModalProps }] = useModalInner((data) => {
	modalData.value = data
	console.log('传递到对话框的数据', modalData.value);

}
);
const options = ref([])
const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
options.value = [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))
const fileList = ref<UploadProps['fileList']>([
	{
		uid: '-1',
		name: 'image.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-2',
		name: 'image.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},

]);

const handleCancel = () => {
	previewVisible.value = false;
	previewTitle.value = '';
};
const handlePreview = async (file: UploadProps['fileList'][number]) => {
	if (!file.url && !file.preview) {
		file.preview = (await getBase64(file.originFileObj)) as string;
	}
	previewImage.value = file.url || file.preview;
	previewVisible.value = true;
	previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};
const formData = reactive({
	selected: '',
	showNickName: '',
	textvalue: '',
	picList: [
		{
			uid: '-1',
			name: 'image.png',
			status: 'done',
			url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
		},
		{
			uid: '-2',
			name: 'image.png',
			status: 'done',
			url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
		},

	],
	fileList: [
		{
			uid: '1',
			name: 'xxx.png',
			status: 'done',
			response: 'Server Error 500', // custom error message to show
			url: 'http://www.baidu.com/xxx.png',
		},
		{
			uid: '2',
			name: 'yyy.png',
			status: 'done',
			url: 'http://www.baidu.com/yyy.png',
		},
		// {
		// 	uid: '3',
		// 	name: 'zzz.png',
		// 	status: 'error',
		// 	response: 'Server Error 500', // custom error message to show
		// 	url: 'http://www.baidu.com/zzz.png',
		// },
	]
})



const handleChange = ({ file, fileList }: UploadChangeParam) => {
	if (file.status !== 'uploading') {
		console.log(file, fileList);
	}
};
</script>

<style lang="less" scoped></style>